<template>
	<view>
		<u-search :show-action="true" v-model="content" @custom="custom" @change="change"></u-search>
		<!-- 循环所查询的帖子(模糊查询) -->
		<view class="top-content" v-for="(item,index) in postList" :key="index" @tap="tapPostD(item.id)">
			<view class="content-headImage">
				<view class="content-headImage-item">
					<view>
						<image :src="'http://127.0.0.1:8080' + item.avatar"></image>
					</view>
					<view>{{item.nickName}}</view>
					<view class="content-button">
						<view class="content-button-item">
							<!-- <image src="../../../../static/images/icon/three-tap.png"></image> -->
						</view>
					</view>
				</view>
				<view class="content-headImage-text">
					<view class="text-wrap">{{item.title}}</view>
				</view>
				<!-- 在此循环图片 -->
				<view class="content-Image-item" v-show="item.imgUrl">
					<image v-for="(item1, index1) in item.imgUrl" :key="index1" :src="item1"></image>
				</view>
			</view>
			<view class="content-Image-item-icon">
				<view class="child">
					<image src="/static/images/banner/share.png"></image>
					<view>分享</view>
				</view>
				<view class="child">
					<image src="/static/images/banner/comment.png"></image>
					<view>评论</view>
				</view>
				<view>
					<image src="/static/images/banner/ok.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from "vue";
	import {
		listPost,
		getPost
	} from '@/api/tiezi/post'
	const content = ref('')
	const postList = ref([])
	//点击搜索
	const custom = (() => {
		listPost({
			content: content.value
		}).then((res) => {
			// console.log(res, 'res是个啥')
			for (let i = 0; i < res.rows.length; i++) {
				if (res.rows[i].imgUrl) {
					res.rows[i].imgUrl = JSON.parse(res.rows[i].imgUrl)
				}
				if (res.rows[i].videoUrl) {
					res.rows[i].videoUrl = JSON.parse(res.rows[i].videoUrl)
				}
			}
			postList.value = res.rows
			console.log(postList, 'res是个啥')
		})
	})
	const change = (() => {
		console.log('222')
	})
	const handleFollowClick = (() => {

	})
	//点击整个帖子触发,将帖子数据传给帖子详情页面
	function tapPostD(id) {
		// postId.value = id
		// console.log(postId.value,'postId.value')
		// if (leState.value == false) {
		uni.navigateTo({
			url: '/pages/postDetail/index?data=' + id
		})
		// }

	}
</script>

<style lang="scss" scoped>
	page {
		// display: flex;
		// flex-direction: column;
		// box-sizing: border-box;
		background-color: #fff;
		// min-height: 100%;
		// height: auto;
	}

	.top-content {
		margin: 15rpx;
		background-color: #f1f1f1;
		border-radius: 15rpx;
		border: 2rpx solid #84AED0;
		// background-color: red;
		.content-headImage {
			padding: 20rpx;

			.content-headImage-item {
				display: flex;
				align-items: center;
				position: relative;

				image {
					margin-right: 10rpx;
					width: 40rpx;
					height: 40rpx;
				}

				.content-button {
					display: flex;
					align-items: center;
				}

				.content-button-item {
					position: absolute;
					top: 0rpx;
					right: 0rpx;
				}

				.popup-delect {
					position: absolute;
					right: 0rpx;
					font-size: 30rpx;
				}
			}

			.content-headImage-item view:nth-child(2) {
				font-size: 30rpx;
			}

			.content-headImage-text view:nth-child(1) {
				margin-top: 10rpx;
				font-size: 30rpx;
			}

			.content-Image-item {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				image {
					border-radius: 10rpx;
					margin-right: 10rpx;
					width: 300rpx;
					height: 300rpx;
				}
			}
		}

		.content-Image-item-icon {
			display: flex;
			align-items: center;
			justify-content: space-around;
			text-align: center;

			.child {
				display: flex;

				view {
					margin-left: 20rpx;
				}
			}

			image {
				margin-bottom: 10rpx;
				width: 35rpx;
				height: 35rpx;
			}
		}
	}
</style>